<template>
    <el-scrollbar class="w-full h-full">

        <div class="space-y-4 px-6">
            <div class="grid grid-flow-row grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
                <el-card v-for="(items, itemsIndex) in statisticCard" :key="itemsIndex" body-style="padding: 16px 0 10px;"
                    body-class="flex justify-around w-full divide-x divide-dashed">
                    <div v-for="(item, itemIndex) in items" :key="itemIndex" class="flex-1">
                        <el-statistic :title="item.title" :value="item.value" />
                    </div>
                </el-card>
            </div>
        </div>

        <departmentCheckbox class=" px-6" v-if="!focusChart" @doSelected="changeSelectedDepartment"></departmentCheckbox>

        <div class="w-full space-y-3 columns-1 xl:flex xl:columns-2 px-0 sm:px-6">
            <div v-for="name in ['KaiTongRenJunChanNeng', 'TouSuRenJunChanNeng']" :key="name" class="flex-1">
                <myChart bodyClass="w-full h-[32rem]" :name="name" :getDomRef="getDomRef" title="" :focusChart="focusChart"
                    @toggle-focus="e => focusChart = e" />
            </div>
        </div>

    </el-scrollbar>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, reactive, onMounted } from 'vue';
import myChart from '@/common/components/myChart.vue';
import departmentCheckbox from '@/common/components/departmentCheckbox.vue';
import { watchResize, watchFocus } from './logic';
import filterData from '@/common/filterData';
const { dataPool } = defineProps(['dataPool']),
    { dataPool1, dataPool2 } = dataPool;

const getOptionFn = () => import('@/components/options/getOption');

const statisticCard = reactive([
    [
        { title: '宽带派单', func: 'count', param: () => ([dataPool1.kuandai_xp.all, selectedDepartment.value.flat(), 'max']) },
        { title: '宽带归档', func: 'count', param: () => ([dataPool1.kuandai_gd.all, selectedDepartment.value.flat(), 'max']) }
    ], [
        { title: '手宽派单', func: 'count', param: () => ([dataPool1.kuandai_xp.shoukuan, selectedDepartment.value.flat(), 'max']) },
        { title: '手宽归档', func: 'count', param: () => ([dataPool1.kuandai_gd.shoukuan, selectedDepartment.value.flat(), 'max']) }
    ], [
        { title: '全家享派单', func: 'count', param: () => ([dataPool1.kuandai_xp.quanjiaxiang, selectedDepartment.value.flat(), 'max']) },
        { title: '全家享归档', func: 'count', param: () => ([dataPool1.kuandai_gd.quanjiaxiang, selectedDepartment.value.flat(), 'max']) }
    ], [
        { title: '金牛派单', func: 'count', param: () => ([dataPool1.kuandai_xp.jinniu, selectedDepartment.value.flat(), 'max']) },
        { title: '金牛归档', func: 'count', param: () => ([dataPool1.kuandai_gd.jinniu, selectedDepartment.value.flat(), 'max']) }
    ], [
        { title: '重点小区派单', func: 'count', param: () => ([dataPool1.kuandai_xp.kaimenhong, selectedDepartment.value.flat(), 'max']) },
        { title: '重点小区归档', func: 'count', param: () => ([dataPool1.kuandai_gd.kaimenhong, selectedDepartment.value.flat(), 'max']) }
    ], [
        { title: '组网派单', func: 'count', param: () => ([dataPool1.xinyewu_xp.zuwang, selectedDepartment.value.flat(), 'max']) },
        { title: '组网归档', func: 'count', param: () => ([dataPool1.xinyewu_gd.zuwang, selectedDepartment.value.flat(), 'max']) }
    ], [
        { title: 'FTTR派单', func: 'count', param: () => ([dataPool1.xinyewu_xp.FTTR, selectedDepartment.value.flat(), 'max']) },
        { title: 'FTTR归档', func: 'count', param: () => ([dataPool1.xinyewu_gd.FTTR, selectedDepartment.value.flat(), 'max']) }
    ], [
        { title: '看家派单', func: 'count', param: () => ([dataPool1.xinyewu_xp.kanjia, selectedDepartment.value.flat(), 'max']) },
        { title: '看家归档', func: 'count', param: () => ([dataPool1.xinyewu_gd.kanjia, selectedDepartment.value.flat(), 'max']) }
    ], [
        { title: '平安乡村派单', func: 'count', param: () => ([dataPool1.xinyewu_xp.pinganxiangcun, selectedDepartment.value.flat(), 'max']) },
        { title: '平安乡村归档', func: 'count', param: () => ([dataPool1.xinyewu_gd.pinganxiangcun, selectedDepartment.value.flat(), 'max']) }
    ], [
        { title: '门锁派单', func: 'count', param: () => ([dataPool1.xinyewu_xp.mensuo, selectedDepartment.value.flat(), 'max']) },
        { title: '门锁归档', func: 'count', param: () => ([dataPool1.xinyewu_gd.mensuo, selectedDepartment.value.flat(), 'max']) }
    ], [
        { title: '投诉派单', func: 'count', param: () => ([dataPool1.tousu_xp.all, selectedDepartment.value.flat(), 'max']) },
        { title: '投诉归档', func: 'count', param: () => ([dataPool1.tousu_gd.all, selectedDepartment.value.flat(), 'max']) }
    ], [
        { title: '电视派单（投诉）', func: 'count', param: () => ([dataPool1.tousu_xp.dianshi, selectedDepartment.value.flat(), 'max']) },
        { title: '电视归档（投诉）', func: 'count', param: () => ([dataPool1.tousu_gd.dianshi, selectedDepartment.value.flat(), 'max']) }
    ]
]);

const updateStatisticCard = () => {
    statisticCard.forEach(card => {
        card.forEach(item => {
            item.value = filterData[item.func](...item.param())
        })
    })
}

const focusChart = ref(''),
    domChart = reactive({});
const charts = window.allCharts['ZongTi'];

const getDomRef = (name) => (el) => domChart[name] = ref(el);

const selectedDepartment = ref([[], []]),
    changeSelectedDepartment = (e) => {
        selectedDepartment.value = e;
        updateStatisticCard();

        Object.keys(charts).forEach(name => {
            const option = charts[name].option;
            option.getChartData([dataPool1, dataPool2], e);
            charts[name].setOption(option, true);
        })
    };

onMounted(async () => {
    updateStatisticCard();

    Object.keys(domChart).forEach(async chart => {
        charts[chart] = echarts.init(domChart[chart]);
        const getOption = (await getOptionFn()).default;
        const option = await getOption('ZongTi', chart);
        option.getChartData([dataPool1, dataPool2]);
        charts[chart].setOption(option);
        charts[chart].option = option;
    });

    watchFocus(focusChart, charts);
    watchResize(charts);
});
</script>

<style scoped>
.el-card {
    flex: 1;
}
</style>
